<!DOCTYPE html>   {% load static %}
<html lang="en-us" class="layout-pf layout-pf-fixed">
<head>
    <title>{% block title %}主页{% endblock %} - 进程管理</title>

    <!-- ============================================================== -->
    <!-- 全局css_js start -->
    <!-- ============================================================== -->
    {% include 'public/css_js_plugin.html' %}
    <!-- ============================================================== -->
    <!-- 全局css_js end -->
    <!-- ============================================================== -->


    <!-- ============================================================== -->
    <!-- 此页面所需js_css(引入) start -->
    <!-- ============================================================== -->
    {% block page_css_js_plugin %}{% endblock %}
    <!-- ============================================================== -->
    <!-- 此页面所需js_css(引入) end -->
    <!-- ============================================================== -->
    <style>

        /*******************
                Preloader
         ********************/
        .preloader {
            width: 100%;
            height: 100%;
            top: 0px;
            position: fixed;
            z-index: 99999;
            background: #fff;

        }

        .cssload-speeding-wheel {
            position: absolute;
            top: calc(50% - 3.5px);
            left: calc(50% - 3.5px);
        }

        .loader,
        .loader__figure {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .loader {
            overflow: visible;
            padding-top: 2em;
            height: 0;
            width: 2em;
        }

        .loader__figure {
            height: 0;
            width: 0;
            box-sizing: border-box;
            border: 0 solid #1976d2;
            border-radius: 50%;
            -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        .loader__label {
            float: left;
            margin-left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            margin: 0.5em 0 0 50%;
            font-size: 0.875em;
            letter-spacing: 0.1em;
            line-height: 1.5em;
            color: #1976d2;
            white-space: nowrap;
            -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        @-webkit-keyframes loader-figure {
            0% {
                height: 0;
                width: 0;
                background-color: #1976d2;
            }
            29% {
                background-color: #1976d2;
            }
            30% {
                height: 2em;
                width: 2em;
                background-color: transparent;
                border-width: 1em;
                opacity: 1;
            }
            100% {
                height: 2em;
                width: 2em;
                border-width: 0;
                opacity: 0;
                background-color: transparent;
            }
        }

        @-moz-keyframes loader-figure {
            0% {
                height: 0;
                width: 0;
                background-color: #1976d2;
            }
            29% {
                background-color: #1976d2;
            }
            30% {
                height: 2em;
                width: 2em;
                background-color: transparent;
                border-width: 1em;
                opacity: 1;
            }
            100% {
                height: 2em;
                width: 2em;
                border-width: 0;
                opacity: 0;
                background-color: transparent;
            }
        }

        @keyframes loader-figure {
            0% {
                height: 0;
                width: 0;
                background-color: #1976d2;
            }
            29% {
                background-color: #1976d2;
            }
            30% {
                height: 2em;
                width: 2em;
                background-color: transparent;
                border-width: 1em;
                opacity: 1;
            }
            100% {
                height: 2em;
                width: 2em;
                border-width: 0;
                opacity: 0;
                background-color: transparent;
            }
        }

        @-webkit-keyframes loader-label {
            0% {
                opacity: 0.25;
            }
            30% {
                opacity: 1;
            }
            100% {
                opacity: 0.25;
            }
        }

        @-moz-keyframes loader-label {
            0% {
                opacity: 0.25;
            }
            30% {
                opacity: 1;
            }
            100% {
                opacity: 0.25;
            }
        }

        @keyframes loader-label {
            0% {
                opacity: 0.25;
            }
            30% {
                opacity: 1;
            }
            100% {
                opacity: 0.25;
            }
        }

        .has_shadow {
            box-shadow: 0 4px 70px -18px #707070;
        }

    </style>

</head>

<body class="cards-pf">


<!-- ============================================================== -->
<!-- 顶部导航 start -->
<!-- ============================================================== -->
{% include 'public/__top_navbar-header.html' with request=request %}
<!-- ============================================================== -->
<!-- 顶部导航 end -->
<!-- ============================================================== -->


<!-- ============================================================== -->
<!-- 左侧导航 start -->
<!-- ============================================================== -->
{% include 'public/__left_navbar.html' %}
<!-- ============================================================== -->
<!-- 左侧导航 end -->
<!-- ============================================================== -->

<!-- ============================================================== -->
<!-- 页面加载中样式 start -->
<!-- ============================================================== -->
{#<div class="preloader">#}
{#    <div class="loader">#}
{#        <div class="loader__figure"></div>#}
{#        <p class="loader__label">页面加载中</p>#}
{#    </div>#}
{#</div>#}
<!-- ============================================================== -->
<!-- 页面加载中样式 end -->
<!-- ============================================================== -->

<!-- ============================================================== -->
<!-- 页面container start -->
<!-- ============================================================== -->
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical  hidden-icons-pf">
    {% block content %}
        <div class="row row-cards-pf">  <!-- row -->
            <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="card-pf card-pf-accented card-pf-aggregate-status">
                    <h2 class="card-pf-title">
                        <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
                    </h2>
                    <div class="card-pf-body">
                        <p class="card-pf-aggregate-status-notifications">
                        <span class="card-pf-aggregate-status-notification">
                            <a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span
                                    class="pficon pficon-add-circle-o"></span></a></span>
                        </p>
                    </div>
                </div>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="card-pf card-pf-accented card-pf-aggregate-status">
                    <h2 class="card-pf-title">
                        <a href="#"><span class="fa fa-shield"></span><span
                                class="card-pf-aggregate-status-count">20</span> Amet</a>
                    </h2>
                    <div class="card-pf-body">
                        <p class="card-pf-aggregate-status-notifications">
                            <span class="card-pf-aggregate-status-notification"><a href="#"><span
                                    class="pficon pficon-error-circle-o"></span>4</a></span>
                            <span class="card-pf-aggregate-status-notification"><a href="#"><span
                                    class="pficon pficon-warning-triangle-o"></span>1</a></span>
                        </p>
                    </div>
                </div>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="card-pf card-pf-accented card-pf-aggregate-status">
                    <h2 class="card-pf-title">
                        <a href="#"><span class="fa fa-shield"></span><span
                                class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
                    </h2>
                    <div class="card-pf-body">
                        <p class="card-pf-aggregate-status-notifications">
                            <span class="card-pf-aggregate-status-notification"><span
                                    class="pficon pficon-ok"></span></span>
                        </p>
                    </div>
                </div>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="card-pf card-pf-accented card-pf-aggregate-status">
                    <h2 class="card-pf-title">
                        <a href="#"><span class="fa fa-shield"></span><span
                                class="card-pf-aggregate-status-count">12</span> Lorem</a>
                    </h2>
                    <div class="card-pf-body">
                        <p class="card-pf-aggregate-status-notifications">
                            <a href="#"><span class="card-pf-aggregate-status-notification"><span
                                    class="pficon pficon-error-circle-o"></span>1</span></a>
                        </p>
                    </div>
                </div>
            </div>
        </div><!-- /row -->
    {% endblock content %}
</div>
<!-- ============================================================== -->
<!-- 页面container end -->
<!-- ============================================================== -->


<!-- ============================================================== -->
<!-- 全局js start -->
<!-- ============================================================== -->
<script>
    $(document).ready(function () {
        // matchHeight the contents of each .card-pf and then the .card-pf itself
        $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();

        // Initialize the vertical navigation    初始化垂直导航
        $().setupVerticalNavigation(true);
    });

    const currentUrl = new URL(window.location.href);
    const currentEnvironment = currentUrl.searchParams.get('environment');

    if (currentEnvironment === 'regressions') {
        let verticalNavEl = document.querySelector('div.nav-pf-vertical');
        let ipsumEl = document.querySelector('[data-target="#ipsum-secondary"]');
        let tertiaryNavItemEl = document.querySelector('.list-group-item.active.tertiary-nav-item-pf')
        verticalNavEl.className = `${verticalNavEl.className} nav-pf-vertical-with-submenus hidden-icons-pf hover-secondary-nav-pf hover-tertiary-nav-pf`;
        ipsumEl.className = `${ipsumEl.className} is-hover`;
        tertiaryNavItemEl.className = `${tertiaryNavItemEl.className} is-hover`;
    }

    //
    $(function () {
           $("ul.list-group .{{ app_name }} ").addClass("active")
    })

</script>
<!-- ============================================================== -->
<!-- 全局js end -->
<!-- ============================================================== -->


<!-- ============================================================== -->
<!-- 此页面所需js start -->
<!-- ============================================================== -->
{% block page_javascript %}{% endblock %}
<!-- ============================================================== -->
<!-- 此页面所需js end -->
<!-- ============================================================== -->
 {{ requset.app_name }}
 {{ app_name }}
</body>


</html>
